//获取tab的li
let tabLi = document.querySelectorAll(".tab_hot li");
//获取box的li
let boxLi = document.querySelectorAll(".box_hot li");
tabLi.forEach(function (item, index) {
  item.onmousemove = function () {
    tabLi.forEach(function (item, index) {
      item.className = "hover";
      boxLi[index].style.zIndex = "1";
    });
    item.className = "move_hover";
    boxLi[index].style.zIndex = "2";
  };
});
$(".top_left").hover(
  function () {
    $(".top_left dl").slideDown();
  },
  function () {
    $(".top_left dl").slideUp();
  }
);
$(".top_right li:eq(1)").hover(
  function () {
    $(".top_right li:eq(1) dl").slideDown();
  },
  function () {
    $(".top_right li:eq(1) dl").slideUp();
  }
);
$(".top_right li:eq(2)").hover(
  function () {
    $(".top_right li:eq(2) dl").slideDown();
  },
  function () {
    $(".top_right li:eq(2) dl").slideUp();
  }
);
$(".top_right li:eq(3)").hover(
  function () {
    $(".top_right li:eq(3) dl").slideDown();
  },
  function () {
    $(".top_right li:eq(3) dl").slideUp();
  }
);

var mySwiper = new Swiper("#swiper0", {
  // direction: "vertical", // 垂直切换选项
  // height: 300,
  // autoHeight: true,
  loop: true, // 循环模式选项
  //初始化索引
  initialSlide: 0,
  effect: "fade",

  autoplay: true,
  // 如果需要分页器
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    bulletClass: "swiper-pagination-bullet",
    bulletActiveClass: "my-bullet-active",
  },
});
let spans = swiper0.querySelectorAll(".swiper-pagination span");
// console.log(spans)
spans[0].innerHTML = `<p>重要通知</p>`;
spans[1].innerHTML = `<p>DNF官方艺
    术设定集</p>`;
spans[2].innerHTML = `<p>春夏游园会</p>`;
mySwiper.el.onmouseover = function () {
  mySwiper.autoplay.stop();
};
mySwiper.el.onmouseout = function () {
  mySwiper.autoplay.start();
};
var newSwiper = new Swiper("#swiper1", {
  // direction: "vertical", // 垂直切换选项
  // height: 300,
  // autoHeight: true,
  loop: true, // 循环模式选项
  //初始化索引
  initialSlide: 0,
  effect: "slide",

  autoplay: true,
  // 如果需要分页器
  pagination: {
    el: ".swiper-pagination",
  },

  // 如果需要前进后退按钮
  navigation: {
    nextEl: ".small .swiper-button-next",
    prevEl: ".small .swiper-button-prev",
  },
});
newSwiper.el.onmouseover = function () {
  newSwiper.autoplay.stop();
};
newSwiper.el.onmouseout = function () {
  newSwiper.autoplay.start();
};

var swiper2 = new Swiper("#swiper2", {
  // direction: "vertical", // 垂直切换选项
  // height: 300,
  // autoHeight: true,
  loop: true, // 循环模式选项
  //初始化索引
  initialSlide: 0,
  effect: "fade",

  autoplay: true,
  // 如果需要分页器
  pagination: {
    el: ".goods .swiper-pagination",
    clickable: true,
  },

  // 如果需要前进后退按钮
  navigation: {
    nextEl: ".goods .swiper-button-next",
    prevEl: ".goods .swiper-button-prev",
  },
});
swiper2.el.onmouseover = function () {
  swiper2.autoplay.stop();
};
swiper2.el.onmouseout = function () {
  swiper2.autoplay.start();
};

// 首页商品列表接口
let box = document.querySelectorAll(
  ".goods .swiper .swiper-wrapper .swiper-slide .box"
);
let slides = document.querySelectorAll(
  ".goods .swiper .swiper-wrapper .swiper-slide"
);
//获取box_hot里面的li
let lis = document.querySelectorAll(".box_hot li");
// console.log(lis)
//获取头部 ul列表的第一个qq登录
let qqLi = document.querySelector(".top .top_right li:nth-child(1)");
if (localStorage.getItem("id")) {
  qqLi.innerHTML = `欢迎您 <a href='#' onclick='quit()'>退出</a>`;
  qqLi.style.fontSize = "12px";
  function quit() {
    localStorage.clear();
    location.reload();
  }
  let homeAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
  axios
    .get(homeAPI, {
      params: { pagenum: 0, pagesize: 16, uid: localStorage.getItem("id") },
    })
    .then((r) => {
      // console.log(r.data);
      let data = r.data.data;
      console.log(data);
      str4 = "";
      for (var i = 0; i < 7; i++) {
        str4 += `
          <div>
            <a href="html/item.html?id=${data[9].pid}"><img src=${data[9].pimg} alt="" /></a>
            <a href="html/item.html?id=${data[9].pid}">${data[9].pname}</a>
            <p>现价:&nbsp;&nbsp;&nbsp;¥${data[9].pprice}</p>
          </div>
          `;
        lis[0].innerHTML = str4;
      }
      str5 = "";
      for (var i = 0; i < 7; i++) {
        str5 += `
          <div>
            <a href="html/item.html?id=${data[11].pid}"><img src=${data[11].pimg} alt="" /></a>
            <a href="html/item.html?id=${data[11].pid}">${data[11].pname}</a>
            <p>现价:&nbsp;&nbsp;&nbsp;¥${data[11].pprice}</p>
          </div>
          `;
        lis[1].innerHTML = str5;
      }
      str6 = "";
      for (var i = 0; i < 7; i++) {
        str6 += `
          <div>
            <a href="html/item.html?id=${data[8].pid}"><img src=${data[8].pimg} alt="" /></a>
            <a href="html/item.html?id=${data[8].pid}">${data[8].pname}</a>
            <p>现价:&nbsp;&nbsp;&nbsp;¥${data[8].pprice}</p>
          </div>
          `;
        lis[2].innerHTML = str6;
      }
      str7 = "";
      for (var i = 0; i < 7; i++) {
        str7 += `
          <div>
            <a href="html/item.html?id=${data[12].pid}"><img src=${data[12].pimg} alt="" /></a>
            <a href="html/item.html?id=${data[12].pid}">${data[12].pname}</a>
            <p>现价:&nbsp;&nbsp;&nbsp;¥${data[12].pprice}</p>
          </div>
          `;
        lis[3].innerHTML = str7;
      }
      str8 = "";
      for (var i = 0; i < 7; i++) {
        str8 += `
          <div>
            <a href="html/item.html?id=${data[13].pid}"><img src=${data[13].pimg} alt="" /></a>
            <a href="html/item.html?id=${data[13].pid}">${data[13].pname}</a>
            <p>现价:&nbsp;&nbsp;&nbsp;¥${data[13].pprice}</p>
          </div>
          `;
        lis[4].innerHTML = str8;
      }

      str1 = "";
      str1 += `
            <div class="box">
              <p>-HOT DERIVATIVE</p>
              <h1>热门周边</h1>
            </div>
        `;
      for (var i = 0; i < 7; i++) {
        str1 += `
            <div>
              <div>
                <img src=${data[i].pimg} alt="" width="100%" />
              </div>
              <a href="html/item.html?id=${data[i].pid}">${data[i].pname}</a>
              <h4>${data[i].pprice}元</h4>
            </div>  
            `;
      }

      slides[1].innerHTML = str1;
      slides[4].innerHTML = str1;
      str2 = "";
      str2 += `
            <div class="box">
              <p>-HOT DERIVATIVE</p>
              <h1>热门周边</h1>
            </div>
        `;
      for (var i = 0; i < 7; i++) {
        str2 += `
            <div>
              <div>
                <img src=${data[4].pimg} alt="" width="100%" />
              </div>
              <a href="html/item.html?id=${data[4].pid}">${data[4].pname}</a>
              <h4>${data[4].pprice}元</h4>
            </div> 
            
            `;
      }
      slides[0].innerHTML = str2;
      slides[3].innerHTML = str2;
      str3 = "";
      str3 += `
            <div class="box">
              <p>-HOT DERIVATIVE</p>
              <h1>热门周边</h1>
            </div>
        `;
      for (var i = 0; i < 7; i++) {
        str3 += `
            <div>
              <div>
                <img src=${data[15].pimg} alt="" width="100%" />
              </div>
              <a href="html/item.html?id=${data[15].pid}">${data[15].pname}</a>
              <h4>${data[15].pprice}元</h4>
            </div> 
            
            `;
      }
      slides[2].innerHTML = str3;
    });
} else {
  qqLi.innerHTML = '<a href="./html/login.html">请QQ登录</a>';
  qqLi.style.fontSize = "14px";
}

// console.log(slides)
// console.log(box)
